<!DOCTYPE html>
<html>
<head>

<!-- <title>on-sea-level-404page.html</title> -->
<!-- <title>sea-404page.html</title> -->
<title>纯css3海面上404页面动画特效</title>

<!-- 源自i7素材网：http://www.17sucai.com/preview/1528155/2019-02-01/4/index.html -->

<meta http-equiv="keywords" content="纯css3,海面上,404页面动画特效">
<meta http-equiv="description" content="纯css3海面上404页面动画特效，该页面比较耗内存和GPU，不推荐使用这个，仅供学习。">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="./css/sea-404page.css">

</head>
<body>

	<div class="error">
		<span>Page not found</span><span>404</span><span>Swim Home, Friend</span>
	</div>
	<div class="sun"></div>
	<div class="clouds">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="birds"></div>
	<div class="sea">
		<div class="wave w-1"></div>
		<div class="wave w-2"></div>
		<div class="fish">
			<span></span><span></span><span></span>
		</div>
	</div>
	<div class="bottom">
		<div class="grass">
			<span> </span><span> </span><span> </span>
		</div>
		<div class="grass">
			<span> </span><span> </span><span> </span>
		</div>
		<div class="grass">
			<span> </span><span> </span><span> </span>
		</div>
		<div class="grass">
			<span> </span><span> </span><span> </span>
		</div>
		<div class="circle">
			<span></span><span></span><span></span><span></span><span></span>
		</div>
		<div class="circle">
			<span></span><span></span><span></span><span></span><span></span>
		</div>
		<div class="circle">
			<span></span><span></span><span></span><span></span><span></span>
		</div>
		<div class="circle">
			<span></span><span></span><span></span><span></span><span></span>
		</div>
		<div class="grass_tw"></div>
		<div class="grass_tw"></div>
		<div class="grass_tw"></div>
	</div>

</body>
</html>